<!-- 群公告 -->
<template>
  <div class="groupDialog_box">
    <!-- <i
      style="padding: 10px 20px; text-align: right; cursor: pointer"
      @click="$emit('close')"
      class="el-icon-close"
    ></i> -->
    <div v-if="groupList" class="notice_box">
      <div class="header-notice_box">
        <span class="title">群公告</span>
        <div @click="handleEditNotice">
          <svg-icon
            style="cursor: pointer"
            iconClass="edit"
            className="edit-btn"
          ></svg-icon>
        </div>
      </div>
      <div class="header-notice_content">
        {{ groupList.notice ? groupList.notice : "暂无公告" }}
      </div>
    </div>
    <div class="group-user_box">
      <span class="title">
        <span>群成员</span>
        <div
          v-if="groupList.masterId == userId && isSiderChat"
          @click="handleAddGroup"
          class="icon"
        >
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </span>
      <div class="user_list" v-if="groupList">
        <div
          v-for="item in groupList.memberList"
          :key="item.id"
          class="user_item"
        >
          <chat-avatar
            :size="32"
            :content="item.avatar ? item.avatar : item.username"
          ></chat-avatar>
          <span class="name"> {{ item.username }}</span>
          <div
            v-if="
              groupList.masterId === userId &&
              item.id !== groupList.masterId &&
              isSiderChat
            "
            class="icon"
          >
            <i @click="handleRemove(item)" class="el-icon-remove-outline"></i>
          </div>
          <div v-if="item.id === groupList.masterId" class="master">群主</div>
        </div>
      </div>
    </div>
    <template v-if="isSiderChat">
      <div class="group-set_box">
        <div class="group-set_item">
          <div>群名称</div>
          <div class="name">
            <el-input
              v-if="nameEdit"
              style="width: 175px"
              ref="setNameInput"
              v-model="groupName"
              autofocus
              @blur="nameEdit = false"
              size="mini"
              @change="handleGroupNameChange"
            ></el-input>
            <template v-else>
              <div class="text">
                <span style="cursor: pointer" @click="handleGroupNameEdit">{{
                  groupName
                }}</span>
              </div>
              <i
                @click="handleGroupNameEdit"
                class="el-icon-edit"
                style="cursor: pointer"
              ></i>
            </template>
          </div>
        </div>
        <div class="group-set_item">
          <span>置顶会话</span>
          <span
            ><el-switch
              v-model="currentChatInfo.isTop"
              :active-value="true"
              :inactive-value="false"
              @change="handleTopChange"
            >
            </el-switch>
          </span>
        </div>
        <div class="group-set_item">
          <span>消息免打扰</span>
          <span
            ><el-switch
              v-model="currentChatInfo.isNotice"
              :active-value="false"
              :inactive-value="true"
              @change="handleNoticeChange"
            >
            </el-switch
          ></span>
        </div>
      </div>
      <div class="group_exist">
        <el-button
          @click="handleExitGroup"
          style="width: 80%"
          type="danger"
          plain
          size="small"
          >退出群聊</el-button
        >
      </div>
    </template>
    <notice-dialog ref="notice"></notice-dialog>
    <add-group
      @submit="handleSubmit"
      operateType="add"
      title="添加群成员"
      ref="addGroup"
    ></add-group>
  </div>
</template>

<script>
import lockr from "lockr"
import { mapState } from "vuex"
import chatAvatar from "../common/avatar.vue"
import noticeDialog from "../dialog/notice.vue"
import AddGroup from "../dialog/addGroup.vue"
import { deleteGroup, updateSingleGroup, updateUserToGroup } from "@/api/user"
import { updateChat } from "@/api/chat"
export default {
  name: "groupPage",
  components: { chatAvatar, noticeDialog, AddGroup },
  data() {
    return {
      nameEdit: false,
      groupName: ""
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.userInfo.userId,
      currentChatInfo: (state) => state.currentChatInfo,
      groupList: (state) =>
        state.groupList.find((item) => item.id === state.receiverId)
    }),
    isSiderChat() {
      return this.$route.path !== "/chat"
    },
    isMaster() {
      return this.groupList.masterId === this.userId
    }
  },

  created() {
    this.groupName = this.groupList.name
  },

  methods: {
    handleEditNotice() {
      this.$refs.notice.open()
    },
    handleAddGroup() {
      this.$refs.addGroup.open()
    },
    handleSubmit(addMemberIds) {
      this.addUserToGroup(addMemberIds)
    },
    async handleRemove(user) {
      this.$confirm(
        `确定将${user.name}移除'${this.groupList.name}'吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const res = await updateUserToGroup({
            id: this.groupList.id,
            removeMemberIds: [user.id]
          })
          if (res) {
            this.$message.success("移除成功")
            this.$store.dispatch("getRecentChatList")
            this.$store.dispatch("getGroupList")
            this.$refs.addGroup.close()
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
    },
    handleExitGroup() {
      if (this.isMaster) {
        this.handleDissolveGroup()
      } else {
        this.handlePersonalExit()
      }
    },
    //解散群聊
    async handleDissolveGroup() {
      this.$confirm(`确定解散'${this.groupList.name}'吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await deleteGroup(this.groupList.id)
          if (res) {
            this.$message.success("解散成功")
            //删除会话
            this.$store.dispatch("deleteChat", this.currentChatInfo.id)
          }
        })
        .catch(() => {
          console.warn("取消解散")
        })
    },
    //个人退出
    async handlePersonalExit() {
      this.$confirm(`确定退出'${this.groupList.name}'吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await updateUserToGroup({
            id: this.groupList.id,
            removeMemberIds: [this.userId]
          })
          if (res) {
            this.$message.success("退出成功")
            this.$store.dispatch("deleteChat", this.currentChatInfo.id)
          }
        })
        .catch(() => {
          console.warn("取消退出")
        })
    },
    async addUserToGroup(addMemberIds) {
      const res = await updateUserToGroup({
        id: this.groupList.id,
        addMemberIds
      })
      if (res) {
        this.$message.success("添加成功")
        this.$store.dispatch("getRecentChatList")
        this.$store.dispatch("getGroupList")
        this.$refs.addGroup.close()
      }
    },
    handleGroupNameChange(val) {
      if (!val) {
        this.groupName = this.groupList.name
      } else {
        this.updateChatName(val)
      }
      // console.log(this.$refs.setNameInput)
      this.nameEdit = false
    },

    async updateChatInfo(params) {
      const res = await updateChat(params)
      if (res) {
        this.$message.success("操作成功")
        this.$store.dispatch("getRecentChatList")
      }
    },
    async updateChatName(val) {
      const res = await updateSingleGroup({
        id: this.groupList.id,
        name: val
      })
      if (res) {
        this.$message.success("操作成功")
      }
    },
    handleGroupNameEdit() {
      this.nameEdit = true
      setTimeout(() => {
        this.$refs.setNameInput.focus()
      }, 100)
    },
    handleTopChange(val) {
      this.updateChatInfo({
        id: this.currentChatInfo.id,
        isTop: val
      })
    },
    handleNoticeChange(val) {
      this.updateChatInfo({
        id: this.currentChatInfo.id,
        isNotice: val
      })
    }
  }
}
</script>
<style lang="less" scoped>
.groupDialog_box {
  width: 280px;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .notice_box {
    height: 170px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(199, 205, 217, 0.3);
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;

    .header-notice_box {
      display: flex;
      justify-content: space-between;

      .edit-btn {
        color: rgba(var(--color-primary));
      }
    }

    .header-notice_content {
      overflow-y: auto;
      flex: 1;
      padding-top: 5px;
      line-height: 18px;
      font-size: 14px;
      word-wrap: break-word;
      color: #666666;
      font-weight: 400;
    }
  }

  .group-user_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .title {
      padding: 10px 20px;
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon {
        font-size: 20px;
        cursor: pointer;
        color: rgba(var(--color-primary));
      }
    }
    .user_list {
      flex: 1;
      overflow: auto;
      padding: 0 20px;
      .user_item {
        display: flex;
        margin-bottom: 20px;
        align-items: center;

        .name {
          display: inline-block;
          width: 163px;
          font-size: 14px;
          color: #333333;
          padding-left: 10px;
        }

        position: relative;

        .icon {
          position: absolute;
          right: 0;
          cursor: pointer;
          color: rgba(var(--color-primary));
        }

        .master {
          position: absolute;
          right: 0;
          cursor: pointer;
          width: 39px;
          height: 27px;
          background: rgba(229, 78, 78, 0.14);
          border-radius: 4px;
          font-size: 12px;
          color: #ff5444;
          text-align: center;
          line-height: 27px;
        }
      }
    }
  }

  .group-set_box {
    .title {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
    }

    .group-set_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 20px;
      border-top: 1px solid rgba(199, 205, 217, 0.3);
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      .name {
        color: #8a8a8a;
        display: flex;
        align-items: center;
        .text {
          display: inline-block;
          text-align: right;
          width: 170px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        i {
          margin-left: 2px;
          &:hover {
            color: rgba(var(--color-primary));
          }
        }
      }
    }
  }

  .group_exist {
    border-top: 1px solid rgba(199, 205, 217, 0.3);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
}
</style>

<style>
.group-user_box {
  font-size: 20px;
  flex: 1;
  /* background-color: rgba(rgba(var(--color-primary)), 0.2); */
}
</style>
